<template>
  <div class="wrapper">
    <div class="section section1">
      <div class="title">JSON格式转换器</div>
      <div class="desc">
        欢迎使⽤JSON格式化器！本⼯具可以帮助您更好的阅读和编辑JSON数据。通过这个⻚⾯使JSON数据
        更容易解析和理解，并且符合您的需要。我们已经为您准备好了⼀些例⼦，或者您可以使⽤⾃⼰的
        JSON数据。
        
      </div>
      <div class="btn">开始使用</div>
    </div>

    <div class="section section2" name="jdoneditor">
      <json-editor-vue class="editor" v-model="jsonobj" currentMode="code" :modeList="modeList"
        :options="options"/>
      <!-- <div class="code-desc">开始格式化</div> -->
    </div>
    <div class="section section3">
      <div class="big-title">概述</div>
      <ul class="ulBox">
        <li v-for="(item,index) in list" :key="index">
          <img :src="item.img" alt="">
          <div class="name">{{item.name}}</div>
          <div class="desc">{{ item.desc }}</div>
        </li>
      </ul>
    </div>
    <div class="section section4">
      <div class="big-title">工具介绍</div>
      <ul class="ulBox">
        <li v-for="(item,index) in list2" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </li>
      </ul>
    </div>
    <div class="section section5">
      <div class="big-title">使用说明</div>
      <ul class="ulBox">
        <li v-for="(item,index) in list3" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
          <div class="remark">{{ item.remark }}</div>
        </li>
      </ul>
    </div>
    <div class="section section6">
      <div class="big-title">常见问题</div>
      <ul class="ulBox">
        <li v-for="(item,index) in list4" :key="index">
          <img :src="item.img" alt="">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </li>
      </ul>
    </div>

    <div class="section section7">
      <div class="big-title">参考文档</div>
      <ul class="ulBox">
        <li v-for="(item,index) in list5" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </li>
      </ul>
    </div>

    <div class="section section8">
      <div class="big-title">联系我们</div>
      <ul class="ulBox">
        <li v-for="(item,index) in list6" :key="index">
          <img :src="item.img" alt="">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </li>
      </ul>
      <div class="btn">联系我们</div>
    </div>
  </div>
</template>

<script setup>

import JsonEditorVue from 'json-editor-vue3'
import img1 from '@/assets/images/img1.jpg'
import img2 from '@/assets/images/img2.jpg'
import img3 from '@/assets/images/img3.jpg'
import img4 from '@/assets/images/img4.jpg'
import img5 from '@/assets/images/img5.png'
import img6 from '@/assets/images/img6.png'
import img7 from '@/assets/images/img7.png'
import img8 from '@/assets/images/img8.jpg'
import img9 from '@/assets/images/img9.jpg'
import img10 from '@/assets/images/img10.jpg'
const list = ref([{
  name: 'JSON是什么？',
  desc: 'JSON是⼀种轻量级的数据交换格式，易于⼈阅读和编写，同时也易于机器解析和⽣成。',
  img : img1
}, {
  name: 'JSON vs XML',
  desc: 'JSON和XML都可以⽤于数据交换，但是JSON相⽐之下更加轻量级，易于解析，代码量更少，响应时间更快。',
  img : img2
}, {
  name: 'JSON在Python中的应⽤',
  desc: 'JSON在Python中⼴泛应⽤，因为它易于解析和⽣成，同时也⾮常灵活和可扩展。',
  img : img3
}, {
  name: 'JSON和API',
  desc: 'JSON是Web API返回数据的常⻅格式之⼀。它易于解析，同时在⽹络传输时具有良好的性能',
  img : img4
}])
const list2 = ref([{
  name: '代码格式化',
  desc: '将压缩的JSON数据转化为带缩进格式的数据，更容易阅读和编辑。同时可以将格式化的内容重新转换为原始JSON格式。'
}, {
  name: '语法高亮',
  desc: '在代码中使⽤颜⾊表现不同的数据类型、键和值，增强可读性。⽀持多种主题样式，⾃定义颜⾊⽅便。'
}, {
  name: '错误提示',
  desc: '在您处理JSON数据时，如果存在错误，我们会标记出错代码⾏，并帮助您找到并纠正问题。'
}, {
  name: '浏览器支持',
  desc: '我们的⼯具在所有主流的浏览器上进⾏了测试，并精⼼优化，确保您在使⽤它们时获得最佳性能和稳定性'
}])
const list3 = ref([{
  name: '步骤一',
  desc: '将需要格式化的JSON数据粘贴到⽂本框中。',
  remark: '如果您不知道如何创建JSON数据，请查看参考⽂档。'
}, {
  name: '步骤二',
  desc: '单击“格式化”按钮。',
  remark: '在屏幕上查看您格式化后的JSON数据。您现在可以阅读和编辑它了！'
}, {
  name: '步骤三',
  desc: '如果您需要重新转换为原始JSON格式，请单击“转换”按钮。',
  remark: '如果您需要将格式化后的JSON数据保存到计算机中，请单击“保存”按钮并选择适当的位置。'
}])
const list4 = ref([{
  name: '为什么我的JSON数据⽆法格式化？',
  desc: '通常，这是由于您的JSON数据本⾝存在错误产⽣的。请检查您的JSON⽂件中是否有⽆效字符或意外的末尾。如果您仍然⽆法解决问题，请联系我们的⽀持团队。',
  img : img5
}, {
  name: '如何将格式化后的JSON数据保存到本地计算机上？',
  desc: '单击屏幕上的“保存”按钮，选择适当的⽂件路径即可。如果您不知道如何操作，请参考操作系统的⽂档或进⾏进⼀步的搜索。',
  img : img6
}, {
  name: '我需要帮助，该如何联系您的技术⽀持？',
  desc: '请通过以下⽅式联系我们的技术⽀持：+1-123-456-7890，support@jsonformatter.com，或直接使⽤⽹站上的联系表单',
  img : img7
}])
const list5 = ref([{
  name: 'JSON官⽅⽂档 ',
  desc: 'http://www.json.org/',
}, {
  name: 'Python JSON',
  desc: 'https://docs.python.org/3/library/json.html',
}, {
  name: 'JSON在线编辑器 ',
  desc: 'https://jsoneditoronline.org/',
}, {
  name: 'JavaScript JSON对象 ',
  desc: 'https://www.w3schools.com/js/js_json_objects.asp',
}])
const list6 = ref([{
  name: '团队介绍',
  desc: '我们是⼀⽀热情、专业的团队，致⼒于帮助客⼾更好、更快地处理JSON数据，并提供⽆与伦⽐的⽤⼾体验。',
  img : img8
}, {
  name: '意⻅和建议',
  desc: '我们⾮常关注客⼾的反馈，并欢迎您的意⻅和建议。任何问题或建议都可以通过以下⽅式与我们联系：feedback@jsonformatter.com',
  img : img9
}, {
  name: '博客和资料',
  desc: '我们为您准备了各种各样的技术资料和社区资源，您可以查看我们的博客、视频教程和其他社交媒体。',
  img : img10
}])
const content = ref({
  name: 'xiaoming'
})
const jsonstr = ref("{ \"a\": 8, \"b\": \"2\", \"c\":8, \"d\":9, \"f\":99 }");
const jsonobj = ref(JSON.parse(jsonstr.value));

const options = ref({
    search: false,
    history: false,
})
const modeList= ref(["text", "view", "tree", "code", "form"]) // 可选模式


const remarkValidate = async (editor) => {
  // if (!editor) return;
  const res = await editor.validate();
 
  // res 是错误列表，如果是空数组，则表示检测没有错误
  if(res.length != 0){
    ElMessage({
      message: '格式错误！',
      type: 'error',
    });
    editorFlag.value = false;
  }else {
    editorFlag.value = true;
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  /* padding:0 150px; */
  overflow: hidden;
}
.section {
  padding: 150px;
  margin-bottom: 1px;
  background: #000;
}
.title {
  font-size: 60px;
  color: #6eb9fc;
  margin-bottom: 30px;
}
.desc {
  font-size: 24px;
  color: #fff;
  line-height: 40px;
}
.btn {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align:center;
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  background: linear-gradient(-90deg, #3C76F4, #00C0FF, #01CE88);
  border-radius: 10px;
}
a {
  color: #fff;
}
.code {
  padding: 100px 0;
  margin:0 auto;
  background: #12295a;
  color: #fff;
  font-size: 20px;
  border-radius: 10px;
  .kh {
    margin-left:20px;
  }
  .nn {
    margin-left:50px;
  }
}
.code-desc {
  color: #fff;
  font-size: 24px;
  margin-top:10px;
}
.section3, .section6, .section8 {
  padding: 50px 150px;
  .big-title {
    color: #6eb9fc;
    font-size:50px;
    margin-bottom: 20px;
  }
  .ulBox {
    display: flex;
    flex-wrap: wrap;
    margin-top:20px;
    overflow: hidden;
    li {
      width: 31%;
      margin-right:3%;
      &:nth-child(3) {
        margin-right: 0;
      }
      img {
        width:100%;
        height: 200px;
        border-radius: 10px;
      }
      .name {
        color: #6eb9fc;
        font-size:30px;
        margin-top:20px;
      }
      .desc {
        color: #fff;
        font-size: 22px;
        margin-top:40px;
      }
    }
  }
}
.section4 {
  padding: 50px 150px;
  .big-title {
    color: #6eb9fc;
    font-size:50px;
  }
  .ulBox {
    display: flex;
    flex-wrap: wrap;
    margin-top:20px;
    li {
      width: 48%;
      margin-right:2%;
      margin-bottom: 20px;
      height: 200px;
      background: #2f3343;
      border-radius: 10px;
      padding: 20px;
      &:nth-child(2) {
        margin-right: 0;
      }
      .name {
        color: #6eb9fc;
        font-size:30px;
      }
      .desc {
        color: #fff;
        font-size: 22px;
        margin-top:10px;
      }
    }
  }
}
.section5 {
  padding: 50px 150px;
  .big-title {
    color: #6eb9fc;
    font-size:50px;
  }
  .ulBox {
    display: flex;
    flex-wrap: wrap;
    margin-top:20px;
    li {
      width: 32%;
      margin-right:2%;
      margin-bottom: 20px;
      border-radius: 10px;
      padding: 20px;
      &:nth-child(3) {
        margin-right: 0;
      }
      .name {
        color: #6eb9fc;
        font-size:30px;
      }
      .desc {
        color: #fff;
        font-size: 22px;
        margin-top:10px;
      }
      .remark {
        color: #fff;
        font-size: 22px;
        margin-top:16px;
      }
    }
  }
}
.section7 {
  padding: 50px 150px 100px 150px;
  .big-title {
    color: #6eb9fc;
    font-size:50px;
  }
  .ulBox {
    margin-top:20px;
    border: 2px solid #6eb9fc;
    border-radius: 10px;
    li {
      display:flex;
      padding: 20px;
      color: #fff;
      font-size: 22px;
      border-bottom: 2px solid #6eb9fc;
      .name {
        width: 30%;
      }
      .desc {
        flex: 1;
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>